<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
import { ref, watchPostEffect, onMounted, getCurrentInstance } from 'vue'
import axios from 'axios'
import config from './conf'
import { useRoute, useRouter } from 'vue-router'
var items = ref([]);
const child_id = ref(null)
const child_device = ref({})
const API_URL = config.URL;
const route = useRouter()
const app = getCurrentInstance();
const users = ref([])
onMounted(() => {
  var uid = '';
  axios.get(API_URL+"/api/mm/index/info").then(function(params){
    console.log(params);
    params.data.data.forEach(element => {
      users.value.push(element);
      uid = element.id;
    });
    child_id.value = uid;
    route.push('/');
  });
},this);
function selectUser(e,t){
  var id = e.target.id;
  child_id.value = id;
}

function statistic(){
  app.appContext.config.globalProperties.$userid = child_id.value;
  route.push('/statistic');
}

watchPostEffect(()=>{
  const url = `${API_URL}/api/mm/index/getStudentStatus?studentid=${child_id.value}`
  if(child_id.value){
    axios.get(url).then(
      (p)=>{
        child_device.value = p.data.data;
        statistic();      
      })
  }
})

</script>

<template>
    

    <div class="container device">
      <li v-for="item in users" @click="selectUser" :id="item.id" >
        <label class="h1">{{ item.nickName }}</label>
         {{ item.mobile }} 
         {{ item.mobileBrand }}-{{ item.mobileModel }}
      </li>
      <div class="row info">
        <div class="col-4">电量<label v-if="child_device.electricQuantity>30">{{ child_device.electricQuantity }}%</label> 
          <label v-else class="c_error">{{ child_device.electricQuantity}}%</label></div>
        <div class="col-4">
          状态<label v-if="child_device.whetherOnline" class="c_ok">在线</label><label v-else class="c_error">离线</label> </div>
        <div class="col-4">
          屏幕<label v-if="child_device.screenStatus" class="c_ok">打开</label><label v-else class="c_error">关闭</label> </div>

      </div>
        
    </div>

  </template>
  <style>
.c_ok{
  color: #068a32;
}
.c_error{
  color:#f00;
}
.info{
  text-align: center;
  color: #333;
  margin-top: 10px;
}
.info label{
  font-size: 2rem;
  display: block;
}
</style>